<!-- 假期详情 -->
<template>
  <el-dialog v-model="dialogVisible" title="假期详情" width="1200" draggable>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="leaveDate" label="日期" width="120" />
      <el-table-column label="时间段" width="280">
        <template #default="scope"> {{ scope.row.startTime }} - {{ scope.row.endTime }} </template>
      </el-table-column>
      <el-table-column prop="leaveStatus" label="状态" width="120">
        <template #default="scope">{{ leaveStatus[scope.row.leaveStatus][0] }}</template>
      </el-table-column>
      <el-table-column prop="reason" label="请假事由" width="120" />
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <div class="remark-content">{{ scope.row.remark }}</div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Api from '../../api'
import { leaveStatus } from '../../definitions/status'

const dialogVisible = ref(false)
const dataList = ref<any[]>([])

/**
 * 打开对话框并加载数据
 *
 */
const openDialog = async (item: any) => {
  const rows = await Api.Leave.getSearchAll({
    userName: item.userName,
    yearNum: item.yearNum,
    leaveCategory: item.holidayCategory,
  })
  dataList.value = rows
  dialogVisible.value = true
}

defineExpose({
  openDialog,
})
</script>
